<template>
    <div class="mapbox">  
	  	<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:800px" @click="getClickInfo">
	  		    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
	  			<!--<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>-->
	  			<!--<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>-->
	  			<!--<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>-->
        </baidu-map>
    </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
       	 	center: {lng:0, lat:0},
     		zoom:17,
     		cityName:"上海市浦东新区祖冲之路1077"
      }
    },
    methods: {
        handler ({BMap, map}) {
				map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
				map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
				var city = this.cityName;
				map.centerAndZoom(city,18);      // 用城市名设置地图中心点
				/*this.center.lng =113.822348
		      	this.center.lat =22.635538*/
		     	this.zoom =this.zoom
		},
		getClickInfo (e) {
				this.center.lng = e.point.lng
				this.center.lat = e.point.lat
       }
    }
  }
</script>

<style>
    .bm-view {

width:100%;

    height:300px;

  }
</style>
